<template>
  <input type="text" v-model="msg" placeholder="测试防抖">
  {{msg}}
</template>

<script>
import { customRef } from "vue";

export default {
  name:"Demo",
  setup(props,context) {
    function MyRef(value,time) {
      let timer
      return customRef((track,trigger) => {
        return {
          set(newValue) {
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue
              trigger() //通知 vue 更新视图
            }, time);
          },
          get() {
            track() //通知 vue 追踪数据
            return value
          }
        }
      })
    }

    let msg = MyRef('',1000)
    return {
     msg
    }
  },
}
</script>

<style>
  button {
    margin: 3px 10px;
  }
</style>